/* ── Custom properties ──────────────────────────────────── */
:host {
--enviso-primary-color: #43D9EC;
--enviso-secondary-color: #111111;
--enviso-tertiary-color: #F8F3EC;
}
/* ── Card host: remove default white card look ───────────── */
:host(:has(section.enviso-offer-card)) {
background: #111111;
box-shadow: none;
border-radius: 20px;
overflow: hidden;
}
/* ── Card section: make it a positioned container ────────── */
section.enviso-offer-card {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 20px;
}
/* ── Image container fills the full card ─────────────────── */
.enviso-offer-availability-picture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* ── Image itself fills its container ───────────────────── */
span.enviso-offer-picture {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
aspect-ratio: unset !important;
border-radius: 0;
}
/* ── Gradient overlay sits above the image ───────────────── */
.enviso-offer-availability-picture::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.45) 45%,
rgba(0, 0, 0, 0) 75%
);
pointer-events: none;
z-index: 1;
}
/* ── Text info block: pinned above the buttons ───────────── */
.enviso-offer-info {
position: absolute;
bottom: 3.25em;
left: 0;
right: 0;
padding: 0 0.85em 0.25em;
min-height: unset;
z-index: 2;
}
header.enviso-offer-name > span {
color: #ffffff;
font-size: 1.1em;
}
summary.enviso-offer-details > span {
color: rgba(255, 255, 255, 0.75);
}
p.enviso-offer-short-description > span {
color: rgba(255, 255, 255, 0.7);
}
.enviso-btn.primary {
color: #000;
}
/* ── Action buttons: pinned at the bottom ────────────────── */
nav.enviso-offer-actions {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
border-top: none;
padding: 0 0.75em 0.65em;
gap: 0.5em;
background: transparent;
}
nav.enviso-offer-actions > enviso-button {
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.75) !important;
border-radius: 99em !important;
font-family: "Maison Neue Demi", Arial, sans-serif;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(4px);
height: 2.8em;
font-size: 0.9em;
}
/* override the separator rule so both borders are white */
nav.enviso-offer-actions > enviso-button + enviso-button {
border-left: 1.5px solid rgba(255, 255, 255, 0.75) !important;
}
/* ════════════════════════════════════════════════════════════
UPSELL / CAROUSEL CARD — mirrors the offer card treatment
════════════════════════════════════════════════════════════ */
/* ── Host: strip default card chrome ────────────────────── */
:host(:has(section.enviso-upsell-offer-card)) {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
background: transparent;
box-shadow: none;
border-radius: 20px;
overflow: hidden;
}
/* ── Size the cross-sell card from its parent shadow root ── */
enviso-cross-sell-offer-card {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
max-width: 350px;
}
/* ── Outer section + inner content: single stacking context ─ */
section.enviso-upsell-offer-card {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 20px;
width: 100%;
}
.enviso-card-content {
position: absolute;
inset: 0;
display: block;
background: transparent;
box-shadow: none;
border-radius: 20px;
width: 100%;
height: 100%;
overflow: hidden;
}
/* ── Children of card-content: remove their own flex layout ─ */
.enviso-card-content > div {
display: block;
}
/* ── Image fills the card ────────────────────────────────── */
div.enviso-upsell-offer-picture {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
aspect-ratio: unset !important;
background-size: cover;
background-position: center;
border-radius: 0;
}
/* ── Gradient overlay ────────────────────────────────────── */
div.enviso-upsell-offer-picture::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.45) 45%,
rgba(0, 0, 0, 0) 75%
);
pointer-events: none;
}
/* ── Title: pinned above the action row ─────────────────── */
header.enviso-offer-name {
position: absolute;
bottom: 3.25em;
left: 0;
right: 0;
margin: 0;
padding: 0 0.85em 0.25em;
z-index: 2;
}
header.enviso-offer-name > span {
color: #ffffff;
font-size: 1.1em;
}
/* ── "Meer info" pill button ─────────────────────────────── */
summary.enviso-offer-details {
z-index: 2;
display: none;
}
summary.enviso-offer-details:has(span:not(:empty)) {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.8em;
padding: 0 1.2em;
border: 2px solid rgba(255, 255, 255, 0.75);
border-radius: 99em;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(4px);
cursor: pointer;
}
summary.enviso-offer-details > span {
color: #ffffff;
font-family: "Maison Neue Demi", Arial, sans-serif;
font-size: 0.9em;
text-decoration: none;
}
/* ── Action row: pinned at the bottom ────────────────────── */
.enviso-details-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 0.75em 0.65em;
background: transparent;
}
/* ── Reset the price/details child div ───────────────────── */
.enviso-details-container > div {
font-size: 1em;
margin: 0;
}
/* ── + icon: strip button chrome, show just the icon ────── */
.enviso-upsell-button {
color: #ffffff !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
box-shadow: none !important;
height: auto !important;
width: auto !important;
min-height: 0 !important;
min-width: 0 !important;
max-width: none !important;
font-size: 2em;
padding: 0 !important;
}
/* ── + icon internals (enviso-button shadow DOM) ─────────── */
:host(.enviso-upsell-button) {
border: none !important;
background: transparent !important;
box-shadow: none !important;
height: auto !important;
width: auto !important;
min-height: 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: 0 !important;
}
:host(.enviso-upsell-button) .enviso-btn {
padding: 0 !important;
width: auto !important;
height: auto !important;
}
:host(.enviso-upsell-button) .enviso-btn.icon-only > enviso-icon {
display: block;
}
:host(.enviso-upsell-button) svg {
fill: #ffffff !important;
}
/* ════════════════════════════════════════════════════════════
CALENDAR — tweak the variables below to restyle the picker
════════════════════════════════════════════════════════════ */
:host {
/* gap between every date cell */
--cal-cell-spacing: 6px;
/* corner rounding on each cell */
--cal-cell-radius: 6px;
/* border colour of available cells */
--cal-cell-border: rgba(0, 0, 0, 0);
/* normal cell background */
--cal-cell-bg: #FFF3E8 !important;
/* disabled / past cell */
--cal-cell-disabled-bg: #f0f0f0;
--cal-cell-disabled-color: #bbbbbb;
/* today highlight colour */
--cal-today-color: #FDD6AF;
/* selected / range cell */
--cal-selected-color: #FDD6AF;
}
/* ── Calendar host: border & radius ─────────────────────── */
:host(:has(table.enviso-month)) {
border: 2px solid var(--cal-today-color);
border-radius: 16px;
overflow: hidden;
}
/* ── Separate cells with configurable gap ─────────────────── */
table.enviso-month {
border-collapse: separate;
border-spacing: var(--cal-cell-spacing);
}
/* ── Square cells
The widget ships height: 3.5em which turns cells into rectangles
once border-spacing eats into the column width.
With table-layout: fixed the browser sets all column widths first,
then aspect-ratio: 1 derives the row height from that width. ── */
.enviso-day {
aspect-ratio: 1 / 1;
}
/* ── Cell base appearance ────────────────────────────────── */
.enviso-dates .enviso-day {
border: 1px solid var(--cal-cell-border) !important;
background-color: var(--cal-cell-bg);
border-radius: var(--cal-cell-radius);
}
/* ── Hover: non-disabled cells get the accent border ────── */
.enviso-dates .enviso-day:not(.enviso-disabled):hover {
border: 2px solid var(--cal-today-color) !important;
}
/* ── State overrides ─────────────────────────────────────── */
.enviso-day.enviso-disabled {
background-color: var(--cal-cell-disabled-bg) !important;
color: var(--cal-cell-disabled-color) !important;
}
.enviso-day.enviso-today {
color: #000000 !important;
position: relative;
}
.enviso-day.enviso-today::after {
content: '';
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #000000 !important;
}
.enviso-dates .enviso-day.enviso-selected,
.enviso-dates .enviso-day.enviso-range-start,
.enviso-dates .enviso-day.enviso-range-end {
outline-color: var(--cal-selected-color) !important;
border-color: var(--cal-selected-color) !important;
}
.enviso-dates .enviso-day.enviso-selected {
background-color: var(--cal-selected-color) !important;
}
.enviso-dates .enviso-day.enviso-in-range {
border-color: var(--cal-selected-color) !important;
}
/* ── Timeslot buttons ─────────────────────────────────────── */
.enviso-timeslot-button {
background-color: var(--cal-cell-bg) !important;
border: 1px solid var(--cal-today-color) !important;
border-radius: var(--cal-cell-radius) !important;
color: #000000 !important;
position: relative;
}
:host([selected]) .enviso-timeslot-button {
background-color: var(--cal-today-color) !important;
}
.enviso-timeslot-button::after {
content: '';
width: 0;
height: 0;
}
/* ── Cross-sell timeslots: remove margin-left on mobile ──── */
@media (max-width: 845px) {
.enviso-cross-sell-timeslots-container {
margin-left: 0 !important;
}
}
5 reacties Commentaar van bezoekers
Zie ook 556_1122 en 556_1045 en 556_1043 =================================================================== Omdat ik het toevallig tegen kwam: 21-12-1921 de inwijding van de kerk ernaast, zie =================================================================== https://proxy.archieven.nl/46/DD2ED16DE31A4C369CB73341AAD86845 =================================================================== Dordrechtsche Courant, 1920-04-16 =================================================================== R. K. M. U. L. 0. School. =================================================================== Hedenmorgen circa 11 uur heeft op het terrein van het voormalige Musis Sacrum aan den Burgemeester de Raadtsingel, de eerste steenlegging door pastoor Jozef Postma, van de eerste R. K. M. U. L. O. School voor jongens plaats gehad. Mede waren aanwezig de R. K. kerkbesturen, de R. K. schoolbesturen en de onderwijzers met hun kinderen. Voorts merkten we op wethouder Grobben en den architect A. B. Schade. Nadat de pastoor een redevoering had gehouden, werd door de kinderen een lied gezongen, waarmede de plechtigheid was afgeloopen. Verschillende foto's worden genomen. Er was veel belangstelling. =================================================================== https://proxy.archieven.nl/46/5F26F15922FA4FCDB27E6A6C75D7E430 =================================================================== St. Jozefschool, R.K.-school voor basisonderwijs aan de Singel 222 (v.h. nr. 154), uitgaande van De. Stichting Katholiek Onderwijs Dordrecht. Toelichting: Tot medio 1970 waren in dit schoolgebouw gehuisvest: de St. Jozefschool, R.K. g.l.o.-school voor jongens en de St.Antoniusschool, R.K. g.l.o.-school voor meisjes. M.i.v. het bovengenoemde tijdstip zijn beide scholen samengevoegd, onder de naam St. Jozefschool. Aanvragen ingevolge art. 72 L.O.-wet 1920. 1924-1936 A 1945-2906. 1937-1951 A 1960-1350. 1952-1959 A 1960-1351
=================================================================== Het gebouw heeft of krijgt de status van Gemeentelijk Monument. =================================================================== https://www.openstreetmap.org/#map=19/51.80837/4.67023 =================================================================== Je vindt er anno nu de navolgende kunstenaars: =================================================================== Henk van Dalen, Diana van Hal, René de Jong, Tamara Jungnickel, Frans van Lent, Marco de Nood, Nico Parlevliet, Manuela Porceddu, Erik Sep, Teresiña Talarico, Bea de Visser.
https://dianavanhalworkshops.nl/ Singel 222A https://www.singel222.nl/the-artists/